<template>
  <div class="base-panels">
    <Row type="flex">
      <Col flex="800px"> <h2 class="title2">撤回行政许可 <i>{{ config.page.total }}</i></h2></Col>
      <Col flex="350px">
        <Row :gutter="[12, 8]">
          <Col :span="18">
            <Select v-model:value="config.params.type">
              <Option value="">请选择撤销类型</Option>
              <Option :value="item.id" v-for="item in dictionary.type">{{ item.dataValue }}</Option>
            </Select>
          </Col>
          <Col :span="6" class="text-right">
            <Button type="primary" @click=" changeHandler({ current: 1 }, config)">查询</Button>
          </Col>
        </Row>
      </Col>
    </Row>
    <Table
        :columns="config.columns"
        :row-key="(record,i) => i"
        :data-source="config.list"
        :pagination="config.page"
        :loading="config.loading"
        @change="(pagination)=> changeHandler(pagination, config)"
        bordered
    >
      <template #indexSlot="{ index }">{{(config.page.current-1)*10+index+1}}</template>


      <template #reason="{ text,record }">
        <p class="mb0">{{text}}</p>
        <p class="mb0 gray9">{{record.punishContent}}</p>
      </template>

      <template #punishOrgan="{ text,record }">
        <p class="mb0">{{text}}</p>
        <p class="mb0">{{ parseTime(record.punishDate)}}</p>
      </template>


      <template #detail="{ text , record }">
        <span class="blue pointer" @click="permitDetail(record)">详情</span>
      </template>
    </Table>
    <Modal v-model:visible="visibleRef" :width="900" title="行政处罚信息详情"
           :footer="null" :centered="true">
      <detail :detail="swDetail"/>
    </Modal>
  </div>

</template>

<script lang="ts">
import {defineComponent, inject, onMounted, reactive, ref, toRefs} from 'vue';
import {Row, Col, Table, Input, Select, Button, Modal} from 'ant-design-vue';
import { getPersonPunishApi2 , getIndexCodeApi } from '/@/api/company';
import { parseTime } from '/@/utils';
import detail from '/@/views/servicemore/punish/detail.vue';
const columns = [
  {
    title: "序号",
    width: 80,
    align: "center",
    slots: { customRender: "indexSlot" }
  },
  {
    title: "处罚类型",
    dataIndex: "targetPublishTypeName",

  },
  {
    title: "处罚原因/内容",
    dataIndex: "punishReason",
    width: 540,
    slots: { customRender: "reason"}
  },
  {
    title: "处罚机关/日期",
    dataIndex: "punishOrgName",
    slots: { customRender: "punishOrgan"}
  }
  ,
  {
    title: "操作",
    dataIndex: "procExplain",
    width: 100,
    slots: { customRender: "detail"}
  }
]

export default defineComponent({
  components: {
    Table , Row, Col, Input, Button, Select, Option: Select.Option,
    Modal,detail
  },
  setup() {
    const corpId = inject('corpId') as string;
    const swDetail = ref({});
    const visibleRef = ref(false);

    const dictionary = reactive({
      type:[]
    })

    const config = reactive({
      columns: columns,
      list: [],
      loading: false,
      page: {
        total: 0,
        current: 1
      },
      params:{
        type:''
      }
    })

    const permitDetail =  (x) => {
      visibleRef.value = true;
      swDetail.value = x;
    };


    const changeHandler = (pagination, config) => {
      const { current } = pagination;
      let { loading, list, page } = toRefs(config);
      let { type } = config.params;
      loading.value = true;
      getPersonPunishApi2( { corpId, current , type }).then( data => {
        let { records, current, total } = data;
        list.value = records;
        loading.value = false;
        page.value = {current, total};
      })
    }

    const getIndexCode = (data,back) =>{
      getIndexCodeApi(data).then(res=>{
        if(back)back(res)
      })
    }

    const init = () => {
      changeHandler({current: 1}, config);

      getIndexCode({indexCode:'XZCF_CFLB',type:'1'},function (res){
        dictionary.type = res;
      })
    }

    onMounted(init)

    return {
      config, changeHandler , dictionary , parseTime ,swDetail ,visibleRef ,permitDetail
    }
  },
})
</script>

<style lang="less" scoped>

.ant-col{
  padding-top: 16px;
  margin-bottom: 8px;
}

.ant-select ,.ant-btn{
  width: 100%;
}

.ant-col.text-right{
  padding-right: 0 !important;
}

</style>

